<template>
  <div class="an-children-page" >


    <view-box ref="viewBox" class="an-page">

      <x-header :left-options="{backText: ''}" >
        <span>详情</span>
        <div slot="right" class="head-ico" @click="OnShopCar">
          <badge :text="shopNum" v-show="shopNum"></badge>
          <x-icon type="ios-cart" class="icon-ccc"></x-icon>
        </div>
      </x-header>

      <div class="shopinfo">
        <swiper
          height="350px"
          :list="demo01_list"
          v-model="demo01_index">
        </swiper>

        <div class="an-box" >
          <box gap="10px 10px">
            <div>
              <span class="color-Danger">￥<span class="money">899</span></span>
            </div>
            <div class="til">
              <h4>标题标题标题标题  </h4>
            </div>

            <flexbox class="info-text">
              <flexbox-item><div >运费：免运费</div></flexbox-item>
              <flexbox-item><div style="text-align: center" >月销16笔</div></flexbox-item>
              <flexbox-item><div style="text-align: right">湖北武汉</div></flexbox-item>
            </flexbox>
          </box>
        </div>

        <group >
          <cell is-link @click.native="onClickChoice">
            <div slot="icon">
              <span style="margin-right: 15px">规格：</span>
            </div>
            <div slot="title">
              <span>选择颜色</span>
            </div>
          </cell>
          <cell is-link>
            <div slot="icon">
              <span style="margin-right: 15px">参数：</span>
            </div>
            <div slot="title">
              <span>产品支持类型……</span>
            </div>
          </cell>
        </group>


        <card :header="{title: '商品详情' }" >
          <div slot="content" style="position: relative; padding-bottom: 50px; overflow: hidden">
            <p class="card-padding">商品描述</p>

            <div v-for="src in list" style="text-align:center; ">
              <span style="font-size:20px;">Loading</span>
              <x-img :src="src" :webp-src="`${src}?type=webp`" @on-success="success"  class="ximg-demo" error-class="ximg-error" :offset="-100" container="#vux_view_box_body"></x-img>
            </div>

          </div>
        </card>

        <divider>已经到底了！</divider>

      </div>


      <tabbar>
        <flexbox :gutter="0" class="an-footer">
          <flexbox-item>
            <div class="btn" style="background: linear-gradient(to right, #ffc201,#ff8a01 )" @click="OnClickShop('1')"><h4>加入购物车</h4></div>
          </flexbox-item>
          <flexbox-item>
            <div class="btn btn-color" @click="OnClickShop('2')"><h4>立即购买</h4></div>
          </flexbox-item>
        </flexbox>
      </tabbar>

    </view-box>

    <div v-transfer-dom>
      <popup v-model="showChoice" height="500px" is-transparent>
        <div class="an-popup" style="height:490px;">
          <shop-choice :defData="posData" @ClChoiceClic="ChoiceClic"></shop-choice>
        </div>
      </popup>
    </div>

    <toast v-model="showToast" :time="800">{{toastMsg}}</toast>

  </div>
</template>

<script>
  import {Box,ViewBox, XHeader,Swiper,Flexbox, FlexboxItem,Group,Cell,Divider,Card,XImg,Tabbar, TabbarItem,Badge,Popup,TransferDom,Toast   } from 'vux'
  import shopChoice from './components/shopChoice'
  const baseList = [{
    url: 'javascript:',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
    title: ''
  }, {
    url: 'javascript:',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg',
    title: ''
  }, {
    url: 'javascript:',
    img: 'https://static.vux.li/demo/5.jpg', // 404
    title: '',
    fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
  }];

    export default {
        name: "shop-info",
      props:{
        id:'',
      },
      directives: {
        TransferDom
      },
      components: {
        shopChoice,
        Box,
        ViewBox,
        XHeader,
        Swiper,
        Flexbox,
        FlexboxItem,
        Group,
        Cell,
        Divider,
        Card,
        XImg,
        Tabbar,
        TabbarItem,
        Badge,
        Popup,
        Toast,
      },
      data () {
        return {
          demo01_list: baseList,
          demo01_index: 0,
          shopNum:'',  //购物车商品数量
          list: [  //详情页图片
            'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1172711164,561972169&fm=11&gp=0.jpg',
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=978660619,2574024956&fm=26&gp=0.jpg',
            'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2008098020,2699631547&fm=26&gp=0.jpg',
            'http://img11.360buyimg.com/n2/jfs/t21427/212/2482703087/369917/ded8cf18/5b56ec91N68bc9f38.jpg!q80.webp',
          ],
          showChoice:false, //是否显示选择弹框
          posData:{  //给子组件传值
            btnId:''
          },
          showToast:false, //提示语
          toastMsg:'',
        }
      },
      watch:{
        '$store.state.appdata.shopCarNum':{
          handler(nd,od){
            this.shopCarNum(nd);
          },
          deep: true
        },
      },
      mounted(){
        this.anLound();
      },
      methods: {
        anLound(){
          let scn = this.$store.state.appdata.shopCarNum;
          this.shopCarNum(scn);
        },
        OnShopCar(){
          this.$router.push({path:'/shopCar'});
        },
        shopCarNum(nd){
          if(nd.length == 0){
            this.shopNum = '';
          }else{
            this.shopNum = nd.length.toString();
          }
        },
        onClickChoice(){
          this.posData.btnId = '0';
          this.showChoice = true;
        },
        ChoiceClic(n){ //子组件回调
          if(n=='0'){
            //0 无操作 直接关闭
          }else if(n=='1'){
            this.toastMsg = '成功加入购物车！';
            this.showToast = true;
          }else{

          }
          this.showChoice = false;
        },
        OnClickShop(n){
          //1加入购物车  2立即购买
          this.posData.btnId = n;
          this.showChoice = true;

        },
        success (src, ele) {
          console.log('success load', src)
          const span = ele.parentNode.querySelector('span')
          ele.parentNode.removeChild(span)
        },
        error (src, ele, msg) {
          console.log('error load', msg, src)
          const span = ele.parentNode.querySelector('span')
          span.innerText = 'load error'
        }
      },
    }
</script>

<style lang="less" >
  .an-children-page{
    height: 100%;
  }
.an-page{
  position: relative;
}
</style>
